<template>
  <!-- 银行流水 -->
  <div class="jeecg-basic-table jeecg-basic-table-form-container">
    <a-form @keyup.enter.native="searchQuery">
      <a-row :gutter="8" type="flex">
        <a-col flex="129px">
          <a-form-item label="部门" :label-col="{ style: { width: '40px' } }" :wrapper-col="{ span: 18 }">
            <JDictSelectTag
              v-model:value="queryParam.ddlxIds"
              mode="multiple"
              dictCode="ddlxType@ddlxUser"
              placeholder="全部"
              :maxTagCount="0"
              :getPopupContainer="(node) => node.parentNode"
              :dropdownStyle="{ width: '150px', overflow: 'auto' }"
              :dropdownMatchSelectWidth="false"
            />
          </a-form-item>
        </a-col>

        <a-col flex="350px">
          <a-form-item label="标题" :label-col="{ style: { width: '60px' } }" :wrapper-col="{ span: 17 }">
            <a-input placeholder="" v-model:value.trim="queryParam.title"></a-input>
          </a-form-item>
        </a-col>

        <a-col flex="auto" style="float:right; width:180px;">
          <span style="float:right;overflow:hidden;" class="table-page-search-submitButtons">
            <a-button type="primary" @click="searchQuery" preIcon="ant-design:search">查询</a-button>
          </span>
        </a-col>
      </a-row>
    </a-form>
  </div>

  <!-- table区域-begin -->
  <BasicTable @register="registerTable" :onRowClick="handleClick" :onRowDbClick="handleDblclick" :rowClassName="rowClassName">

  </BasicTable>
  <!-- table区域-end-->

  <CmsScheduleDetail @register="registerScheduleDetail" @success="reload"></CmsScheduleDetail>
</template>

<script lang="ts" setup name="weixin-article-cmsScheduleList">
import { ref, computed, unref, reactive, toRaw } from "vue";
import { BasicTable, TableAction, ActionItem, BasicColumn } from "/@/components/Table";
import { useModal } from "/@/components/Modal";
import { useListPage } from "/@/hooks/system/useListPage";
import { render } from "/@/utils/common/renderUtils";
import { momentSearchQueryDate } from "/@/utils/dateUtil";
import { cmsGoodsList } from "/@/views/weixin/article/artticle.api";
import { useMessage } from "/@/hooks/web/useMessage";

import moment from 'dayjs'
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
import CmsScheduleDetail from './modules/CmsScheduleDetail.vue';

//初始化 -------------------------------------------------------------
//定义查询表单，查询条件
const queryParam = reactive({
  ddlxIds: [],
  title: "",
})

const $message = useMessage();

/* 日期参数 */
function disabledStartDate(beginDate) {
  const endDate = queryParam.jzsjEnd
  if (!beginDate || !endDate) {
    return false
  }
  return beginDate.valueOf() > moment(endDate).valueOf()
}

function disabledEndDate(endDate) {
  const beginDate = queryParam.jzsjBegin
  if (!endDate || !beginDate) {
    return false
  }
  return moment(beginDate).valueOf() > endDate.valueOf()
}

//产品列表
const statusFmt = ({text}: { text: any }) => {
  if (!text) {
    return
  }
  const color = text == '0' ? 'green' : text == '1' ? 'red' : 'gray';
  return render.renderTag(render.renderDict(text, 'stateType'), color)
}

//订单列表 - 表头
const columns: BasicColumn[] = [
  {title: '状态', dataIndex: 'state', width: 38, customRender: statusFmt,},
  { title: "部门", align: "center", dataIndex: "ddlx", width: 35 },
  { title: "线路名称", align: "left", dataIndex: "goodsName", width: 160, ellipsis: true,
    customRender: ({ text, record }) => {
      return record.number + "【" + record.sub + "】" + record.title ;
    }
  },
  { title: "行程", dataIndex: "days", align: "center", width: 30 }, //, customRender: lineDaysFmt
  { title: "截止", dataIndex: "isGuestEnd", align: "center", width: 30 }, //, customRender: lineDaysFmt
  { title: "线路特色", align: "left", dataIndex: "labelText", width: 80 },
  { title: "出港城市", align: "left", dataIndex: "schepost", width: 60 },
  { title: "出团日期", align: "left", dataIndex: "tourDate", width: 200 },
  { title: "成人价格", align: "right", dataIndex: "price", width: 48, className:"text-red-500" },
  { title: "儿童价格", align: "right", dataIndex: "priceChild", width: 48, className:"text-green-500" },
  { title: "销售总量", align: "center", dataIndex: "total", width: 48, className:"text-blue-500" },
]

function searchQuery() {
  setProps({searchInfo:toRaw(queryParam)});
  reload()
}

function handleSummary(tableData: Recordable[]) {
  const res = getRawDataSource()
  if (res) {
    return getRawDataSource().summary;
  } else {
    return [];
  }
}

// 列表页面公共参数、方法
const {prefixCls, tableContext} = useListPage({
  designScope: 'cms-goods-list',
  tableProps: {
    api: cmsGoodsList,
    columns: columns,
    size: 'small',
    showTableSetting: false,
    showIndexColumn: true,    //行号
    showActionColumn: false,
    useSearchForm: false,
    showSummary: false,
  },
})

//注册table数据
const [registerTable, {reload, setProps, getRawDataSource, redoHeight}] = tableContext

//新增订单
const [registerScheduleDetail, {openModal: openSchedulesModal}] = useModal();

//单击行
let selectRows = reactive<any>({id: '', username: ''});
function handleClick(record) {
  selectRows.id = record.id
  selectRows.username = record.username
}

//双击行
function handleDblclick(record) {
  //alert("handleDblclick" + record.id);
  editoperation(record)
}

function rowClassName(record, index) {
  return record.id === selectRows.id ? 'row-selected' : '';
}

//编辑内容
function editoperation(record: Recordable) {
  let ddlx = record.ddlx;
  Object.assign(record, selectRows)
  if (!selectRows.id) {
    $message.createMessage.warning("请选择数据！");
    return false;
  }
  openSchedulesModal(true, { isUpdate: false, id: selectRows.id });
}

</script>
<style scoped>

</style>
